﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style scoped>
        .login-container {
            width: 900px;
            margin: 0 auto;
            font-family: '宋体', sans-serif;
            color: #ffffff;
            font-size: 12px;
        }

        .login-header {
            height: 105px;
            display: block;
        }

        .login-body {
            height: 300px;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .login-form-wrapper {
            width: 540px;
            padding-right: 40px;
        }

        .login-form {
            display: inline-block;
        }

        .form-group {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

            .form-group label {
                width: 80px;
                text-align: right;
                margin-right: 10px;
            }

        .form-control {
            width: 130px;
            height: 20px;
            padding: 2px;
            border: 1px solid #ccc;
            border-radius: 2px;
        }

        .button-group {
            padding-left: 90px;
            margin-top: 10px;
        }

        .login-button {
            cursor: pointer;
            padding: 5px 20px;
            background-color: #4a6fa5;
            color: white;
            border: none;
            border-radius: 2px;
        }

            .login-button:hover {
                background-color: #3a5f85;
            }

        .login-footer {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 添加id="app"作为Vue挂载点 -->
    <div id="app" class="login-container">
        <img src="images/login_11.gif" alt="Login Header" class="login-header" />

        <div class="login-body" style="background-image: url('images/login_22.jpg')">
            <div class="login-form-wrapper">
                <div class="login-form">
                    <div class="form-group">
                        <label for="userName">登 录 名：</label>
                        <input type="text"
                               id="userName"
                               v-model="userName"
                               class="form-control" />
                    </div>

                    <div class="form-group">
                        <label for="userPassword">登录密码：</label>
                        <input type="password"
                               id="userPassword"
                               v-model="userPassword"
                               class="form-control" />
                    </div>

                    <div class="button-group">
                        <button v-on:click="handleLogin" class="login-button">登录</button>
                    </div>
                </div>
            </div>
        </div>

        <img src="images/login_33.jpg" alt="Login Footer" class="login-footer" />
    </div>

    <script type="text/javascript">
        const { createApp, ref, reactive, computed, onMounted } = Vue;
        // 从Element Plus导入Message组件
        const { ElMessage } = ElementPlus;
        const app = createApp({
            setup() {
                const userName = ref('');
                const userPassword = ref('');

                // 处理登录逻辑
                async function handleLogin() {
                try {
                const response = await axios.post("/Text/Login",
                    {
                        u_true_name: userName.value, 
                        u_password: userPassword.value 
                    },
                    { headers: { "Content-Type": "application/json" } } 
                );

                if (response.data.success) {
                    ElMessage.success("登录成功");
                    window.location.href='@Url.Action("Index1", "Home")';
                } else {
                    ElMessage.success("登录失败: " + response.data.message);
                }
                } catch (error) {
                console.error(error);
                 ElMessage.success("登录失败: " + (error.response?.data?.message || "未知错误"));
               }
        
                }

                return {
                    userName,
                    userPassword,
                    handleLogin
                }
            }
        });

        app.use(ElementPlus, {
             locale: ElementPlusLocaleZhCn
         });

         // 正确挂载应用
         app.mount('#app');
    </script>
</body>
</html>